<?php if(isset($isInsert) && $isInsert){
?>
<script>
	ajax('listContent','<?php echo $this->params['controller']?>/lists');
	closeBox('addContent','mainContent');
</script>
<?php
}
else{
?>
<style>
    
    .ui-state-highlight { height: 280px;
    margin-left: 10px;
    overflow: hidden;
    width: 250px;
    float:left;
    }
    </style>
<script type="text/javascript">
function addImage(imageId,filename){	
	$('#'+imageId).find('.galleryImageContainer').mouseenter(function(){			
		var imgItem=$('#'+this.parentNode.id).find('.imageItem');			
		imgItem.fadeIn(100)
	}).mouseleave(function(){
		var imgItem=$('#'+this.parentNode.id).find('.imageItem');
		imgItem.fadeOut(100)
	});

	newImg=document.createElement("img");	

	$('#'+imageId).find('.galleryImageContainer').children().first().before(newImg);
	newImg.onload = function () {
		var width=245;
		var height=200;
		var newSize = new resizeImage(this.width,this.height,width,height);
		this.width=newSize.width;
		this.height=newSize.height;
		this.style.marginLeft=(width-this.width)/2+"px";
		this.style.marginTop=(height-this.height)/2+"px";
		this.style.position="absolute";
	};
	newImg.src =SITE_URL+'/uploaded/Image/thumb/'+filename;	
}
</script>
<fieldset>
    <legend><?php _resource('edit'. $this->params['controller']);?>
    	<?php if($webConfig['is_multi_lang']){?>
       		<img class="Tips1" title="<?php echo $listLang[$locale]?>" border="0" src="<?php echo $this->webroot.'img/backend/flag/'.$locale.'.png'?>">
       		<?php }?>
    </legend>
<center><div id="message">&nbsp;</div></center>
<?php if($this->Session->read('message')){
	echo '<script>showMessage("addContent","'.$this->Session->read('message').'");</script>';
	$this->Session->delete('message');	
	}?>
<?php if($this->Session->read('error')){
	echo '<script>showMessage("addContent","'.$this->Session->read('error').'",1);</script>';
	$this->Session->delete('error');
}?>
    <form id="adminForm" name="adminForm" method="post" action="<?php echo $this->params['controller']?>/edit/<?php echo $this->data[$uses[0]]['id'].'/'.$locale ?>"  onsubmit="onFormSubmit();return false;">
    <?php
		echo $this->Form->hidden($uses[0].'.id');		
		echo $this->Form->hidden($uses[0].'.view_order');
		echo $this->Form->hidden($uses[0].'.published');
				

	?>
	    <?php echo $this->Form->input($uses[0].'.title',array('value'=>empty($this->data[$uses[0]]['title'])?'Untitle Album':$this->data[$uses[0]]['title'],'onkeyup'=>'onEnterSubmit(this,event,"onFormSubmit()")','class'=>'input_noborder','label'=>'','div'=>'','size'=>60,'maxlength'=>255,'style'=>'font-weight:bold'));?>
	<div style="width: 80px; height: 18px; border: solid 1px #7FAAFF; background-color: #C5D9FF; padding: 2px;float: right;">
		<span id="spanButtonPlaceholder"></span>
	</div>
	<div style="clear:both;height:20px;"></div>
	<div id="blankContent" style="display:none"></div>
	<div id="divUploadContainer">
		<?php if(count($imgdata)>0){
			foreach($imgdata as $k=>$v){
			?>
       		<div class="progressWrapper" id="imageUploaded_<?php echo $v['Image']['id']?>" style="float: left; opacity: 1;">
	       		<div class="galleryImageContainer" style="width: 245px; height: 200px;">		       		
		       		<div class="imageItem" style="width: 235px; padding-right: 10px; display: none;">
		       			<a title="album cover" onclick="albumCover('<?php echo $v['Image']['image']?>')" href="javascript:;">&nbsp;&nbsp;Album Cover&nbsp;&nbsp;</a>
		       			&nbsp;&nbsp;|&nbsp;&nbsp;		       			
		       			<a title="remove" onclick="removeImage('imageUploaded_<?php echo $v['Image']['id']?>','<?php echo $v['Image']['image']?>')" href="javascript:;">&nbsp;&nbsp;X&nbsp;&nbsp;</a>
		       		</div>
	       		</div>
	       		<input type="hidden" class="inputHidden" name="data[Image][image][imageUploaded_<?php echo $v['Image']['id']?>]" value="<?php echo $v['Image']['image']?>">
	       		<input style="margin-top: 5px; margin-bottom: 0px; width: 250px;" name="data[Image][title][<?php echo $v['Image']['image']?>]" value="<?php echo $v['Image']['title']?>">
	       		<input style="margin-top: 5px; margin-bottom: 45px; width: 250px;" name="data[Image][tag][<?php echo $v['Image']['image']?>]" value="<?php echo $v['Image']['tag']?>">
       		</div>
       		<script type="text/javascript">
       			addImage('imageUploaded_<?php echo $v['Image']['id']?>','<?php echo $v['Image']['image']?>');
       		</script>
       	<?php }}?>
       	<div id="lastContainer" style="clear:both;"></div>
    </div>
       		

	<div style="clear:both"></div>
	<center>
    <div style="width:130px">
          <div class="button"><a onclick="onFormSubmit()" href="javascript:;" title="<?php echo _resource('save') ?>"  > <span class="icon-32-save"> </span></a> </div>          
          <div class="button"><a onclick="closeBox('addContent','mainContent')" href="javascript:;" title="<?php echo _resource('close') ?>"  > <span class="icon-32-cancel"> </span></a> </div>
    </div>
    </center>
      </form>
</fieldset>


<script>	
function onFormSubmit(){
	deactivateEditors();
	submitForm('adminForm','addContent');	
}

function removeImage(imageId,filename){
	ajaxNoRespond("images/remove/"+filename);
	$('#'+imageId).remove();	
}	

function albumCover(filename){
	ajax("blankContent","image_categories/albumcover/"+filename+"/<?php echo $this->data[$uses[0]]['id']?>");
	//ajaxNoRespond("image_categories/albumcover/"+filename+"/<?php echo $this->data[$uses[0]]['id']?>");
}
var imageSizeWidth=245;
var imageSizeHeight=200;
var uploader = new qq.FineUploader({
    element: document.getElementById('spanButtonPlaceholder'),
    request: {
      endpoint: '<?php echo BACKEND_URL.'fileuploads/imageupload/image/Image/'.$this->data[$uses[0]]['id']?>'
    },
    dragAndDrop:{
    	hideDropzones:false,
    	disableDefaultDropzone:true,
    	extraDropzones:[document.getElementById('divUploadContainer')]
        },
    multiple: true,
    text :{
    	uploadButton:"Browse"
    },
    validation: {
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
        sizeLimit: 5 * 1024 * 1024 // 50 kB = 50 * 1024 bytes
      },
      failedUploadTextDisplay:{mode:'none'},
    callbacks: {
    	onSubmit: function(id, fileName) {
        	$('.qq-upload-list').css('display','none');
        	var fileProgressWrapper = document.createElement("div");
    		fileProgressWrapper.className = "progressWrapper";
    		fileProgressWrapper.id = "imageUploaded_"+id;
    		fileProgressWrapper.style.cssFloat="left";
    		
    		var fileProgressElement = document.createElement("div");
    		fileProgressElement.className = "progressContainer";
    		fileProgressElement.id="progressContainer_"+id;
    		fileProgressElement.innerHTML='<div id="file-' + id + '" class="alert" style="margin: 0"></div>';

    		//add image            
            var imageContainer = document.createElement("div");
			imageContainer.className = "galleryImageContainer";
			imageContainer.id= "galleryImageContainer_"+id;
			imageContainer.style.width=imageSizeWidth+"px";
			imageContainer.style.height=imageSizeHeight+"px";
			fileProgressWrapper.appendChild(imageContainer);
			
    		fileProgressWrapper.appendChild(fileProgressElement);
    		$('#lastContainer').before(fileProgressWrapper);    	
           
          },
          onUpload: function(id, fileName) {
            $('#file-' + id).addClass('alert-info')
                            .html('<img src="<?php echo $this->webroot.'plugins/fineuploader/loading.gif'?>" alt="Initializing. Please hold."> ' +
                                  'Initializing ' +
                                  '“' + fileName + '”');
          },
          onProgress: function(id, fileName, loaded, total) {
            if (loaded < total) {
              progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
              $('#file-' + id).removeClass('alert-info')
                              .html('<img src="<?php echo $this->webroot.'plugins/fineuploader/loading.gif'?>" alt="In progress. Please hold."> ' +
                                    'Uploading ' +
                                    '<b>' + fileName + '</b>' +
                                    progress);
            } else {
              $('#file-' + id).addClass('alert-info')
                              .html('<img src="<?php echo $this->webroot.'plugins/fineuploader/loading.gif'?>" alt="Saving. Please hold."> ' +
                                    'Saving ' +
                                    '<b>' + fileName + '</b>');
            }
          },
  	  onComplete: function(id, fileName, responseJSON) {
  		if (responseJSON.success) {
  	  		//get image container
            var imageContainer = $("#galleryImageContainer_"+id);

			var newImg=document.createElement("img");	
			imageContainer.append(newImg);
			newImg.imageSizeWidth=imageSizeWidth;
			newImg.imageSizeHeight=imageSizeHeight;
			
			newImg.onload = function () {
				var newSize = new resizeImage(newImg.width,newImg.height,imageSizeWidth,imageSizeHeight);
				newImg.width=newSize.width;
				newImg.height=newSize.height;
				newImg.style.marginLeft=(imageSizeWidth-newSize.width)/2+"px";
				newImg.style.marginTop=(imageSizeHeight-newSize.height)/2+"px";
				newImg.style.position="absolute";
			};
			//add fucntion image
			var imageItem=document.createElement("div");
			imageItem.className="imageItem";		
			imageItem.style.width=(imageSizeWidth-10)+"px";
			imageItem.style.paddingRight="10px";
			imageItem.style.display="none";
			imageItem.innerHTML='<a href="javascript:;" onclick="albumCover(\''+responseJSON.FILEID+'\',\'<?php echo $this->data[$uses[0]]['id']?>\')" title="Album Cover">&nbsp;&nbsp;Album Cover&nbsp;&nbsp;</a>';
			imageItem.innerHTML+='&nbsp;&nbsp;|&nbsp;&nbsp;<a href="javascript:;" onclick="removeImage(\'imageUploaded_'+id+'\',\''+responseJSON.FILEID+'\')" title="remove">&nbsp;&nbsp;X&nbsp;&nbsp;</a>';
			imageContainer.append(imageItem);
			$('#galleryImageContainer_'+id).mouseenter(function(){			
				var imgItem=$('#'+this.parentNode.id).find('.imageItem');			
				imgItem.fadeIn(100)
			}).mouseleave(function(){
				var imgItem=$('#'+this.parentNode.id).find('.imageItem');
				imgItem.fadeOut(100)
			});
			
			//load image
			newImg.src="<?php echo $this->webroot.'uploaded/Image/thumb/'?>"+responseJSON.FILEID;
			//remove status
            $('#progressContainer_' + id).remove();
            //add field
            var FieldInput = document.createElement("input");
			FieldInput.className = "inputHidden";
			FieldInput.type = "hidden";
			FieldInput.name = "data[Image][image][imageUpload_"+id+"]";
			imageContainer.after(FieldInput);			

			FieldInput = document.createElement("input");
			FieldInput.style.marginTop="5px";
			FieldInput.style.width="250px";
			FieldInput.name = "data[Image][tag]["+responseJSON.FILEID+"]";
			imageContainer.after(FieldInput);

			FieldInput = document.createElement("input");
			FieldInput.style.marginTop="5px";
			FieldInput.style.width="250px";
			FieldInput.name = "data[Image][title]["+responseJSON.FILEID+"]";
			imageContainer.after(FieldInput);
			
          } else {
            $('#file-' + id).removeClass('alert-info')
                            .addClass('alert-error')
                            .html('<i class="icon-exclamation-sign"></i> ' +
                                  'Error with ' +
                                  '<b>' + fileName + '</b>');
          }
           
       }
    },

    debug: true
  });

$( "#divUploadContainer" ).sortable({
    placeholder: "ui-state-highlight"
});
$( "#divUploadContainer" ).disableSelection();
	scrollTopTo('addContent');		
</script>
<?php } ?>
